<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        火车上 规定  同一时刻只能有一个人上洗手间 
        如果门开着  一个人进去  关上门  完事后出来  把门打开  
        下一个如果看到门 开着才可以进去  如果看到门关着  只能等着  




     -->
    <button>点击获取验证码</button>
    <!-- 点击以后 按钮失效 显示小时*秒之后重新获取 -->
    <script>


        // 获取元素
        var btn = document.getElementsByTagName('button')[0];

        var flag = true;
        //绑定点击事件 

        btn.onclick = function(){
            // 下一个函数执行以前 先判断flag是否是true 
            // 如果不是true 不执行 如果是true 执行
            if(flag == false){
                return 
            }
            var count = 5; // 走到这里说明函数执行了
            // 初始文本 5秒后重新获取
            btn.innerText = `${count}s后重新获取`

            flag = false;

            // 到计时   4秒后重新获取  3秒 ... 点击获取验证码
            var num = setInterval(function(){
                count--;
                btn.innerText = `${count}s后重新获取`
                if(count <=0){
                    clearInterval(num);
                    btn.innerText = `点击获取验证码`
                    flag = true; // 这个函数执行完毕  状态改变 下一个函数执行 
                }
            },1000);
        }



        // 第一次点击 a函数执行 
    </script>

</body>
</html>